<template>
  <Dialog title="年度集采" v-model="dialogVisible">
    <div class="gysTotal">
        共{{userList.length}}家供应商
    </div>
    <div class="gysList">
        <div class="gys-top">
            <img src="../../../assets/imgs/round.png" alt="">
            <div class="gys-top-btn">
                 <el-button type="primary" plain>+邀请</el-button>
                 <el-button type="primary" plain>确定</el-button>
                 <el-button type="primary" plain>取消</el-button>
            </div>
        </div>
        <div class="gys-items-main" v-for="item in  userList" :key="item.id">
            <div class="gys-items-img">
                 <img src="../../../assets/imgs/round.png" alt="">
            </div>
            <div class="gys-items-big">
                <div class="gys-items">
                    <div class="gys-name">
                        {{item.nickname}}
                    </div>
                    <div class="gys-status" >良好</div>
                    <div class="gys-status" v-show="false" style="background:#FAEFE8;color: rgba(255, 141, 26, 1);">一般</div>
                    <div class="gys-status" v-show="false" style="background:#F7E7EF;color:rgba(227, 60, 100, 1);">危险</div>
                </div>
                <div class="gys-phone">
                    联系人：李小四  13400661517
                </div>
            </div>
        </div>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" :disabled="formLoading">生成合同</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import * as roleApi from '@/api/system/role'

const dialogVisible = ref(false) // 弹窗的是否展示
const userList = ref([])
/** 打开弹窗 */
const open = async (id) => {
  dialogVisible.value = true
  console.log(id)
  // 加载用户列表
  userList.value = await roleApi.getSimpleUserList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

<style scoped>
.gysTotal{
    font-size: 18px;
    color: #000;
    padding-left: 20px;
}
.gysList{

}
.gys-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}
.gys-top img{
    width: 16px;
}
.gys-top-btn{
    
}
.gys-items-main{
    display: flex;
    background: rgba(249, 250, 255, 1);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    justify-content: space-between;
}
.gys-items-img{
    
}
.gys-items-img img{
    width: 16px;
}
.gys-items-big{
    width: 92%;
}
::v-deep .gys-top-btn .el-button{
    
}
.gys-items{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 10px;
}
.gys-name{
    font-size: 16px;
    color: #000;
    font-weight: bold;
}
.gys-status{
    font-size: 14px;
    color: rgba(81, 123, 255, 1);
    border: 1px solid;
    padding: 1px 10px;
    border-radius: 9px;
    background: #E8EDFF;
}
.gys-phone{
    font-size: 14px;
}
</style>